<template>
  <el-cascader
    ref="cascader"
    v-model="selectNode"
    :options="mockCascaderTree"
    :filterable="true"
    :filter-method="onFilterMethod"
    v-bind="mergeAttrs"
    @change="onChange"
  ></el-cascader>
</template>

<script>
export default {
  name: 'CascaderTree',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    names: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 类型<String> 5:区域，6:子公司，7:全部
    type: {
      type: String,
      default: '5'
    }
  },

  data () {
    return {
      cascaderTree: [],
      defaultProps: {
        label: 'name',
        value: 'id',
        checkStrictly: true
      }
    }
  },
  computed: {
    selectNode: {
      get: function () {
        return this.value
      },
      set: function (newValue) {
        this.$emit('change', newValue)
      }
    },
    mergeAttrs () {
      return Object.assign({
        placeholder: '大区/区域/场区',
        filterable: true,
        clearable: true,
        size: 'mini',
        props: {
          label: 'name',
          value: 'id',
          checkStrictly: true
        }
      },
      this.$attrs
      )
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 获取数据
    async getData () {
      const res = await this.$post({
        url: '/api/detection/api/ignoreTokenDetection/getRCAF',
        data: {
          type: this.type
        }
      })
      if (res.status === 200) {
        this.cascaderTree = res.data
      }
    },
    onFilterMethod (node, keyword) {
      const value = node.value + ''
      return node.label.indexOf(keyword) > -1 || value.indexOf(keyword) > -1
    },
    onChange (e) {
      this.$nextTick(() => {
        const text = this.$refs.cascader.presentText || ''
        console.log(text)
        this.$emit('update:names', ['111'])
        if (text) {
          this.$emit('update:names', text.split(' / '))
        } else {
          this.$emit('update:names', [])
        }
        this.$emit('changeSuccess', e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
